<template>
  <div id="card">
    <el-row>
      <el-col :span="8" style="text-align: center">
        <el-tooltip content="复位">
          <el-button
            class="iconfont el-icon-aim"
            type="text"
            color="black"
            @click.native="handleReset"
          />
        </el-tooltip>
      </el-col>
      <el-col :span="8" style="text-align: center">
        <el-tooltip content="图例">
          <el-popover
            placement="bottom"
            trigger="click"
          >
            <img src="@/assets/images/tuli.png" alt="">
            <el-button slot="reference" type="text" class="el-icon-info" />
          </el-popover>

        </el-tooltip>
      </el-col>
      <el-col :span="8" style="text-align: center">
        <el-tooltip :content="isfull ? '退出全屏' : '全屏'">
          <el-button
            type="text"
            :class="isfull ? 'iconfont el-icon-tuichuquanping' : 'iconfont el-icon-quanping'"
            color="black"
            @click.native="handleChange"
          />
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- <Icon type="md-add-circle"  size="24" color="black"/>
    <Icon type="md-remove-circle" size="24" color="black"/>
    <Icon type="md-locate" size="24" color="black"/>
    <Icon type="md-alert" size="24" color="black"/>
    <Icon type="md-qr-scanner" size="24" color="black" /> -->
  </div>
</template>

<script>
import Snap from 'snapsvg-cjs'
import { zpd } from 'snap.svg.zpd'

export default {
  name: 'MapContainer',
  props: {
    // isfull: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {

      isfull1: 50,
      isfull: false,
      temp: 1
    }
  },
  mounted() {
    console.log(document)
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    document.addEventListener('fullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.isfull = !this.isfull
    })
    document.addEventListener('msfullscreenchange', () => {
      this.isfull = !this.isfull
    })
  },
  methods: {
    handleReset() {
      const svg = Snap('#svg')
      svg.zpd(function(_err, paper2) {
        svg.zoomTo(1, 1, mina.linear, function(_err, paper3) {
          svg.panTo(0, 0)
        })
      })
    },
    handleFullscreen() {
      const main = document.getElementById('snap-svg')
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        console.log(main.requestFullscreen)
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
      }
    },
    handleChange() {
      this.handleFullscreen()
    },
    reduce() {
      this.isfull1 -= 1
    }
    // enlarge() {
    //   this.isfull1 += 1
    //   const temp = (this.temp += 0.1)
    //   const svg = Snap('#stacker2')
    //   svg.zpd(function(_err, paper2) {
    //     svg.zoomTo(temp, 1, mina.linear, function(_err, paper3) {
    //     })
    //   })
    // }
  }
}
</script>

<style>
#card {
  box-shadow: 0 4px 8px 0 #454545;
  background: #fff;
  padding: 6px 6px;
  border-radius: 8px;
  /* position: absolute;
  bottom: 12px; */
  z-index: 999;
  width: 120px;
  position: fixed;
  left: 45%;
  bottom: 10px;
  /* height: 40px; */
}
.demo-svg {
  float: left;
  width: 68px;
  height: 48px;
  /* border-radius: 6px; */
  display: inline-block;
}
.h3NewStyle {
  float: left;
  font-size: 12px;
  color: #2f3033;
  font-weight: 500;
  margin: 0px;
}
.description {
  margin-top: -6px;
  font-size: 12px;
  transform: scale(0.9);
  color: #7e7f8c;
}
</style>
